<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画效果</title>
    <style>
        div {
            border: 1px solid #aaa;
        }
        #container {
            width: 500px;
            height: 500px;
            position: relative;
        }
        #box {
            width: 20px;
            height: 20px;
            position: absolute;
            top: 20px;
            left: 20px;
        }
    </style>
</head>
<body>
<ol>
    <li>创建这边两个div, 并写好相关样式</li>
    <li>理解动画效果的原理，改变top和left的值</li>
    <li>设置一个定时器，定时更改top和left的值</li>
    <li>判断box这个块是否移动出了容器边框</li>
    <li>调整临界问题</li>
</ol>
<div id="container">
    <div id="box">
        1
    </div>
</div>
<script>
    // console.log(window);
let boxItem = document.getElementById("box");
let boxTopItem = 0,boxLeftItem= 0;
let boxTopItemMove = 1;
let timer = setInterval(function () {
    boxItem.style.top=boxTopItem+"px";
    boxItem.style.left=boxLeftItem+"px";
    boxTopItem+=5 * boxTopItemMove;
    boxLeftItem+=2;
    if (boxTopItem>=483){ // p按段
        boxTopItemMove = -1;
        // clearInterval(timer);
    }
}, 50)


</script>
</body>
</html>